
// let a = 110;

// function foo(user) {
//   return `${user.firstName} ${user.lastName}`
// }

// function DemoA() {
//   return (
//     <div>
//       <h2>{a + 110}</h2>
//       {/* 注释也是js代码，也需要使用{}包起来 */}
//       {/* 隐式类型转化，把number a转化成string a */}
//       <h2>{a + 'hello'}</h2>
//       <h2>{`${a}world`}</h2>
//       <h2>{foo({ firstName: "Wang", lastName: " Cai" })}</h2>
//     </div>
//   )
// }

// export default DemoA;

// -----------------------------------------------------

// function foo(arg) {
//   if (arg) {
//     return <div>{arg}</div>
//   } else {
//     return <div>我是一个默认值</div>
//   }
// }

// function DemoA() {
//   return (
//     <div>
//       <h3>{foo(110)}</h3>
//       <h3>{foo('hello')}</h3>
//       <h3>{foo()}</h3>
//       <h3>{foo(<span>我是一个span</span>)}</h3>
//     </div>
//   )
// }

// export default DemoA;


// -----------------------------------------------------

// let ele = '<div><a href="http://baidu.com">hello react</a></div>'

// function DemoA() {
//   return (
//     <div>
//       {ele}
//       <hr />
//       <div dangerouslySetInnerHTML={{ __html: ele }}></div>
//       <hr />
//       {/* style是用来写行内样式，行内样式需要写成对象的形式 */}
//       {/* 对象是js代码，需要放在{} */}
//       <div style={{ border: '1px solid red', height:'100px' }} />
//       <div style={{ border: '1px solid red', height:'100px' }} />
//       <div style={{ border: '1px solid red', height:'100px' }} />
//       <div style={{ border: '1px solid red', height:'100px' }} />
//     </div>
//   )
// }

// export default DemoA;


// -----------------------------------------------------

let a = "item1"
let b = "item2"

function DemoA() {
  return (
    <div>
      <div className="box" style={{ border: '1px solid red', height: '100px' }} />
      <div className={a} style={{ border: '1px solid red', height: '100px' }} />
      <div className={`${a} ${b}`} style={{ border: '1px solid red', height: '100px' }} />
      <div className={`${a} ${b} item3`} style={{ border: '1px solid red', height: '100px' }} />
      <div className='box1' className='box2' style={{ border: '1px solid red', height: '100px' }} />
      <div className='box1' className={a} style={{ border: '1px solid red', height: '100px' }} />
    </div>
  )
}

export default DemoA;